<template>
  <div>
    <el-card shadow="always" class="title"> {{ title }} </el-card>

    <div class="flex justify-between p-t-10">
      <el-card
        :body-style="{ padding: '0px' }"
        v-for="(o, i) in currentRow"
        :key="i"
        class="flex-1 m-l-10 m-r-10"
      >
        <img :src="o.img" class="image" />
        <div style="padding: 14px">
          <p style="font-size: 28px" class="text-align">{{ o.cm }}</p>
        </div>
      </el-card>
    </div>

    <el-button
      class="m-t-20 p-20"
      @click="nextchange"
      type="primary"
      style="width: 100%"
      >下一步</el-button
    >
  </div>
</template>

<script>
import gongdoui from "@/assets/imgs/order/gongdoui.png";
import mantou from "@/assets/imgs/order/mantou.png";
import doujiang from "@/assets/imgs/order/doujiang.png";

import z1 from "@/assets/imgs/order/zhong/1.png";
import z2 from "@/assets/imgs/order/zhong/2.png";
import z3 from "@/assets/imgs/order/zhong/3.png";
import z4 from "@/assets/imgs/order/zhong/4.png";

import w1 from "@/assets/imgs/order/wan/1.png";
import w2 from "@/assets/imgs/order/wan/2.png";
import w3 from "@/assets/imgs/order/wan/3.png";
import w4 from "@/assets/imgs/order/wan/4.png";

export default {
  data() {
    return {
      currentRow: [],
      currentRowType: 1,
      title: "",
      zaocan: [
        {
          cm: "红豆粥",
          img: gongdoui,
        },
        {
          cm: "馒头",
          img: mantou,
        },
        {
          cm: "五香蛋",
          img: doujiang,
        },
      ],
      zhongcan: [
        {
          cm: "红烧肉",
          img: z1,
        },
        {
          cm: "蒜泥生菜",
          img: z2,
        },
        {
          cm: "西红柿炒鸡蛋",
          img: z3,
        },
        {
          cm: "丝瓜圆子汤",
          img: z4,
        },
      ],
      wancan: [
        {
          cm: "红烧鸭子",
          img: w1,
        },
        {
          cm: "空心菜",
          img: w2,
        },
        {
          cm: "瓜炒肉片",
          img: w3,
        },
        {
          cm: "海带蛋汤",
          img: w4,
        },
      ],
    };
  },
  created() {
    const currentRow = this.$route.query.currentRow ?? this.currentRowType;
    if (currentRow == 1) {
      this.currentRow = this.zaocan;
      this.title = "早餐";
    }
    if (currentRow == 2) {
      this.currentRow = this.zhongcan;
      this.title = "中餐";
    }
    if (currentRow == 3) {
      this.currentRow = this.wancan;
      this.title = "晚餐";
    }
    this.currentRowType = currentRow;
  },
  methods: {
    nextchange() {
      this.$router.push({
        name: "serve-order-from",
        query: {
          stepsactive: 3,
          currentRow: this.currentRowType,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #8c8c8c;

  &::v-deep .el-card__body {
    padding: 5px;
  }
}

.image {
  width: 100%;
  height: 250px;
}
</style>
